리액트 동시성 모드: 향상된 사용자 경험을 위한 중단 가능한 렌더링 심층 분석

리액트 동시성 모드는 리액트 애플리케이션의 렌더링 방식에 중대한 변화를 가져왔으며, 중단 가능한 렌더링이라는 개념을 도입했습니다. 이는 리액트가 업데이트를 처리하는 방식을 근본적으로 바꾸어, 긴급한 작업을 우선 처리하고 무거운 부하 속에서도 사용자 인터페이스의 반응성을 유지할 수 있게 해줍니다. 이 블로그 게시물에서는 동시성 모드의 핵심 원칙, 구현 세부 사항, 그리고 글로벌 사용자를 위한 고성능 웹 애플리케이션 구축에 있어 실질적인 이점들을 심도 있게 다룰 것입니다.

동시성 모드의 필요성 이해하기

전통적으로 리액트는 현재 레거시 모드 또는 블로킹 모드라고 불리는 방식으로 작동했습니다. 이 모드에서는 리액트가 업데이트 렌더링을 시작하면 렌더링이 완료될 때까지 동기적으로, 중단 없이 진행됩니다. 이는 특히 복잡한 컴포넌트나 대규모 데이터셋을 다룰 때 성능 문제를 일으킬 수 있습니다. 긴 동기적 렌더링 동안 브라우저는 응답하지 않게 되어, 사용자는 지연을 느끼고 좋지 않은 사용자 경험을 하게 됩니다. 예를 들어, 전자상거래 웹사이트에서 사용자가 상품을 필터링하려고 할 때마다 눈에 띄는 지연을 겪는다고 상상해보십시오. 이는 매우 답답할 수 있으며 사용자가 사이트를 이탈하게 만들 수 있습니다.

동시성 모드는 렌더링 작업을 더 작고 중단 가능한 단위로 분할하여 이러한 한계를 해결합니다. 이를 통해 리액트는 우선순위에 따라 렌더링 작업을 일시 중지, 재개 또는 포기할 수 있습니다. 사용자 입력과 같은 높은 우선순위의 업데이트가 진행 중인 낮은 우선순위의 렌더링을 중단시킬 수 있어, 부드럽고 반응성 좋은 사용자 경험을 보장합니다.

동시성 모드의 핵심 개념

1. 중단 가능한 렌더링

동시성 모드의 핵심 원칙은 렌더링을 중단할 수 있는 능력입니다. 메인 스레드를 차단하는 대신, 리액트는 사용자 입력에 응답하는 등 더 긴급한 작업을 처리하기 위해 컴포넌트 트리의 렌더링을 일시 중지할 수 있습니다. 이는 협력적 스케줄링이라는 기술을 통해 달성됩니다. 리액트는 일정량의 작업 후 브라우저에 제어권을 넘겨주어, 브라우저가 다른 이벤트를 처리할 수 있도록 합니다.

2. 우선순위

리액트는 다양한 유형의 업데이트에 우선순위를 할당합니다. 타이핑이나 클릭과 같은 사용자 상호작용은 일반적으로 백그라운드 업데이트나 덜 중요한 UI 변경보다 높은 우선순위를 갖습니다. 이는 가장 중요한 업데이트가 먼저 처리되도록 하여 더 반응성 좋은 사용자 경험을 제공합니다. 예를 들어, 검색창에 입력하는 것은 다른 백그라운드 프로세스가 상품 카탈로그를 업데이트하고 있더라도 항상 즉각적으로 느껴져야 합니다.

3. 파이버 아키텍처

동시성 모드는 리액트의 내부 아키텍처를 완전히 재작성한 리액트 파이버(Fiber) 위에 구축되었습니다. 파이버는 각 컴포넌트를 파이버 노드로 표현하여, 리액트가 컴포넌트 업데이트에 필요한 작업을 추적하고 그에 따라 우선순위를 정할 수 있도록 합니다. 파이버는 리액트가 대규모 업데이트를 더 작은 작업 단위로 분할할 수 있게 하여 중단 가능한 렌더링을 가능하게 합니다. 파이버를 리액트를 위한 상세한 작업 관리자로 생각하면 되며, 이를 통해 다양한 렌더링 작업을 효율적으로 스케줄링하고 우선순위를 정할 수 있습니다.

4. 비동기 렌더링

동시성 모드는 비동기 렌더링 기술을 도입합니다. 리액트는 업데이트 렌더링을 시작한 후 다른 작업을 수행하기 위해 일시 중지할 수 있습니다. 브라우저가 유휴 상태일 때, 리액트는 중단했던 지점부터 렌더링을 재개할 수 있습니다. 이를 통해 리액트는 유휴 시간을 효과적으로 활용하여 전반적인 성능을 향상시킬 수 있습니다. 예를 들어, 사용자가 현재 페이지와 상호작용하는 동안 리액트는 다중 페이지 애플리케이션의 다음 페이지를 미리 렌더링하여 원활한 탐색 경험을 제공할 수 있습니다.

5. 서스펜스(Suspense)

서스펜스는 데이터 가져오기와 같은 비동기 작업이 완료되기를 기다리는 동안 렌더링을 "일시 중단"할 수 있게 해주는 내장 컴포넌트입니다. 빈 화면이나 스피너를 표시하는 대신, 서스펜스는 데이터가 로드되는 동안 대체 UI를 표시할 수 있습니다. 이는 시각적 피드백을 제공하고 UI가 응답하지 않는 것처럼 느껴지는 것을 방지하여 사용자 경험을 향상시킵니다. 소셜 미디어 피드를 상상해보십시오. 서스펜스는 서버에서 실제 콘텐츠를 가져오는 동안 각 게시물에 대한 플레이스홀더를 표시할 수 있습니다.

6. 트랜지션(Transitions)

트랜지션을 사용하면 업데이트를 긴급하지 않은 것으로 표시할 수 있습니다. 이는 리액트에게 해당 트랜지션보다 사용자 입력과 같은 다른 업데이트를 우선 처리하도록 지시합니다. 트랜지션은 반응성을 희생하지 않으면서 부드럽고 시각적으로 매력적인 전환 효과를 만드는 데 유용합니다. 예를 들어, 웹 애플리케이션에서 페이지 간 이동 시, 페이지 전환을 트랜지션으로 표시하여 리액트가 새 페이지에서의 사용자 상호작용을 우선 처리하도록 할 수 있습니다.

동시성 모드 사용의 이점

• 향상된 반응성: 리액트가 렌더링을 중단하고 긴급한 작업을 우선 처리할 수 있게 함으로써, 동시성 모드는 특히 무거운 부하 상황에서 애플리케이션의 반응성을 크게 향상시킵니다. 이는 더 부드럽고 즐거운 사용자 경험으로 이어집니다.
• 향상된 사용자 경험: 서스펜스와 트랜지션을 사용하면 시각적으로 더 매력적이고 사용자 친화적인 인터페이스를 만들 수 있습니다. 사용자는 비동기 작업을 처리할 때에도 자신의 행동에 대한 즉각적인 피드백을 볼 수 있습니다.
• 더 나은 성능: 동시성 모드는 리액트가 유휴 시간을 더 효과적으로 활용하여 전반적인 성능을 향상시킬 수 있게 합니다. 대규모 업데이트를 더 작은 작업 단위로 분할함으로써, 리액트는 메인 스레드를 차단하지 않고 UI의 반응성을 유지할 수 있습니다.
• 코드 분할 및 지연 로딩: 동시성 모드는 코드 분할 및 지연 로딩과 원활하게 작동하여, 현재 뷰에 필요한 코드만 로드할 수 있게 합니다. 이는 애플리케이션의 초기 로드 시간을 크게 줄일 수 있습니다.
• 서버 컴포넌트(미래): 동시성 모드는 서버 컴포넌트를 위한 전제 조건입니다. 서버 컴포넌트는 서버에서 컴포넌트를 렌더링할 수 있게 해주는 새로운 기능입니다. 서버 컴포넌트는 클라이언트에서 다운로드하고 실행해야 하는 자바스크립트의 양을 줄여 성능을 향상시킬 수 있습니다.

리액트 애플리케이션에 동시성 모드 구현하기

리액트 애플리케이션에서 동시성 모드를 활성화하는 것은 비교적 간단합니다. 이 과정은 Create React App을 사용하는지 또는 사용자 정의 빌드 설정을 사용하는지에 따라 다릅니다.

Create React App 사용하기

Create React App을 사용하는 경우, `index.js` 파일을 업데이트하여 `ReactDOM.render` API 대신 `createRoot` API를 사용함으로써 동시성 모드를 활성화할 수 있습니다.

// 이전:
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(, document.getElementById('root'));

// 이후:
import { createRoot } from 'react-dom/client';
import App from './App';

const root = createRoot(document.getElementById('root'));
root.render();

사용자 정의 빌드 설정 사용하기

사용자 정의 빌드 설정을 사용하는 경우, 리액트 18 이상을 사용하고 빌드 구성이 동시성 모드를 지원하는지 확인해야 합니다. 또한 위에서 보여준 것처럼 `index.js` 파일을 업데이트하여 `createRoot` API를 사용해야 합니다.

데이터 가져오기를 위한 서스펜스 사용하기

동시성 모드를 최대한 활용하려면 데이터 가져오기에 서스펜스를 사용해야 합니다. 이를 통해 데이터가 로드되는 동안 대체 UI를 표시하여 UI가 응답하지 않는 것처럼 느껴지는 것을 방지할 수 있습니다.

다음은 가상의 `fetchData` 함수와 함께 서스펜스를 사용하는 예시입니다:

import { Suspense } from 'react';

function MyComponent() {
 const data = fetchData(); // Assume fetchData() returns a Promise-like object
 return (
  

   
{data.title}
   
{data.description}
  
 );
}

function App() {
 return (
  Loading...

import { useState, useTransition } from 'react';

function MyComponent() {
 const [isPending, startTransition] = useTransition();
 const [value, setValue] = useState('');

 const handleChange = (e) => {
  startTransition(() => {
   setValue(e.target.value);
  });
 };

 return (
  

   
   
Value: {value}
   {isPending && 
Updating...
}
  
 );
}

export default MyComponent;